import logo from "./logo.svg";
import "./App.css";
import { useState, useEffect } from "react";
import KanbanBoard from "./KanbanBoard";
import AdminContext from "./context/AdminContext";


// const todoList = [
//   { title: "开发任务-1", status: "2022-01-10 10:00" },
//   { title: "开发任务-3", status: "2023-02-10 10:00" },
//   { title: "开发任务-5", status: "2023-02-10 10:00" },
//   { title: "开发任务-5", status: "2023-02-10 10:00" },
//   { title: "开发任务-5", status: "2023-02-10 10:00" },
//   { title: "开发任务-5", status: "2023-02-10 10:00" },
//   { title: "开发任务-5", status: "2023-02-10 10:00" },
//   { title: "测试任务-1", status: "2023-02-10 10:00" }
// ]
// const ongoingList = [
//   { title: "开发任务-4", status: "2023-02-10 10:00" },
//   { title: "开发任务-6", status: "2023-02-10 10:00" },
//   { title: "测试任务-2", status: "2023-02-10 10:00" }
// ]
// const doneList = [
//   { title: "开发任务-2", status: "2023-02-10 10:00" },
//   { title: "测试任务-1", status: "2023-02-10 10:00" }
// ]

export const MINUTE = 60 * 1000;
export const HOUR = 60 * MINUTE;
export const DAY = 24 * HOUR;

export const UPDATE_INTERVAL = MINUTE;
const DATA_STORE_KEY = "kanban-data-store";
const COLUMN_KEY_TODO = "todo";
const COLUMN_KEY_ONGOING = "ongoing";
const COLUMN_KEY_DONE = "done";

function App() {
  // const [showAdd, setShowAdd] = useState(false);
  const [todoList, setTodoList] = useState([
    { title: "开发任务-1", status: "2022-01-10 10:00" },
    { title: "开发任务-3", status: "2023-02-10 10:00" },
    { title: "开发任务-5", status: "2023-02-10 10:00" },
    { title: "开发任务-5", status: "2023-02-10 10:00" },
    { title: "开发任务-5", status: "2023-02-10 10:00" },
    { title: "开发任务-5", status: "2023-02-10 10:00" },
    { title: "开发任务-5", status: "2023-02-10 10:00" },
    { title: "测试任务-1", status: "2023-02-10 10:00" },
  ]);
  const [ongoingList, setOngoingList] = useState([
    { title: "开发任务-4", status: "2023-02-10 10:00" },
    { title: "开发任务-6", status: "2023-02-10 10:00" },
    { title: "测试任务-2", status: "2023-02-10 10:00" },
  ]);
  const [doneList, setDoneList] = useState([
    { title: "开发任务-2", status: "2023-02-10 10:00" },
    { title: "测试任务-1", status: "2023-02-10 10:00" },
  ]);
  const [isLoading, setIsLoading] = useState(true)
  const [isAdmin, setIsAdmin] = useState(false)

  useEffect(() => {
    const data = window.localStorage.getItem(DATA_STORE_KEY);
    setTimeout(() => {
      if (data) {
        const kanbanColumnData = JSON.parse(data);
        setTodoList(kanbanColumnData.todoList);
        setOngoingList(kanbanColumnData.ongoingList);
        setDoneList(kanbanColumnData.doneList);
      }
    }, 1000);
  }, []);
  useEffect(() => {
    if (todoList !== null && ongoingList !== null && doneList !== null) {
      setIsLoading(false)
    }
  }, [isLoading, todoList, ongoingList, doneList])
  const updaters = {
    [COLUMN_KEY_TODO]: setTodoList,
    [COLUMN_KEY_ONGOING]: setOngoingList,
    [COLUMN_KEY_DONE]: setDoneList,
  };
  // const handleAdd = (evt) => {
  //   setShowAdd(true)
  // }
  // const handleSubmit = (title) => {
  //   todoList.unshift({ title, status: new Date().toLocaleDateString() + ' ' + new Date().toLocaleTimeString() });
  //   console.log(new Date().toString())
  //   // setShowAdd(false)
  // }
  // 将handleSubmit 换个写法 handleAdd
  const handleAdd = (newCard) => {
    setTodoList((currentTodoList) => [newCard, ...currentTodoList]);
  };
  const handleSaveAll = () => {
    const data = JSON.stringify({
      todoList,
      ongoingList,
      doneList,
    });
    window.localStorage.setItem(DATA_STORE_KEY, data);
  };
  const handleRemove = (column, cardToRemove) => {
    updaters[column]((currentStat) => {
      // const data = currentStat.filter((item) => !Object.is(item, cardToRemove))
      const data = currentStat.filter((item) => item.title !== cardToRemove.title)
      console.log(data.length, currentStat.length)
      if (data.length === currentStat.length) {
        return [cardToRemove, ...data]
      }
      return data
    })
  }
  const handleToggleAdmin = (evt) => {
    setIsAdmin(!isAdmin)
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>
          我的看板<button onClick={handleSaveAll}>保存所有卡⽚</button>
          <label>
            <input type="checkbox" value={isAdmin} onChange={handleToggleAdmin} />
          </label>
        </h1>
        <img src={logo} alt="logo" className="App-logo" />
      </header>
      {/* <main className="kanban-board">
        <section className="kanban-column column-todo">
          <h2>待处理
            <button onClick={handleAdd} disabled={showAdd}>&#8853;添加新卡片</button>
          </h2>
          <ul>
            { showAdd && <NewKanbanCard onSubmit={handleSubmit}/>}
            {
              todoList.map((props, index) => <KanbanCard {...props} key={index}> </KanbanCard>)
            }
          </ul>
        </section>
        <section className="kanban-column column-ongoing">
          <h2>进行中
            <button onClick={handleAdd} disabled={showAdd}>&#8853;添加新卡片</button>
          </h2>
          <ul>
            {showAdd && <NewKanbanCard onSubmit={handleSubmit}/>}
            {
              ongoingList.map((props, index) => <KanbanCard {...props} key={index}></KanbanCard>)
            }
          </ul>
        </section>
        <section className="kanban-column column-done">
          <h2>已完成
            <button onClick={handleAdd} disabled={showAdd}>&#8853;添加新卡片</button>
          </h2>
          <ul>
            { showAdd &&<NewKanbanCard onSubmit={handleSubmit}/>}
            {
              doneList.map((props, index) => <KanbanCard {...props} key={index}></KanbanCard>)
            }
          </ul>
        </section>
      </main> */}
      <AdminContext.Provider value={isAdmin}>

        <KanbanBoard
          isLoading={isLoading}
          todoList={todoList}
          ongoingList={ongoingList}
          doneList={doneList}
          onAdd={handleAdd}
          onRemove={handleRemove}
        >
          {/* <KanbanColumn className='column-todo'
          canAddNew
          onAdd={handleAdd}
          title="待处理"
          setDraggedItem={setDraggedItem}
          setIsDragSource={(isSrc) => setDragSource(isSrc ? COLUMN_KEY_TODO : null)}
          setIsDragTarget={(isTgt) => setDragTarget(isTgt ? COLUMN_KEY_TODO : null)}
          onDrop={handleDrop}
        cardList={todoList}> */}
          {/* <h2>待处理
            <button onClick={handleAdd} disabled={showAdd}>&#8853;添加新卡片</button>
            </h2>
          <ul>
            {showAdd && <NewKanbanCard onSubmit={handleSubmit} />}
            {
              todoList?.map((props, index) => <KanbanCard {...props} key={index} onDragStart={() => setDraggedItem(props)}> </KanbanCard>)
            }
          </ul> */}
          {/* </KanbanColumn> */}
          {/* <KanbanColumn className='column-ongoing'
          title="进行中"
          canAddNew
          onAdd={handleAdd}
          setDraggedItem={setDraggedItem}
          setIsDragSource={(isSrc) => setDragSource(isSrc ? COLUMN_KEY_ONGOING : null)}
          setIsDragTarget={(isTgt) => setDragTarget(isTgt ? COLUMN_KEY_ONGOING : null)}
          onDrop={handleDrop}
        cardList={ongoingList}> */}
          {/* <h2>进行中
            <button onClick={handleAdd} disabled={showAdd}>&#8853;添加新卡片</button>
            </h2>
            <ul>
            {showAdd && <NewKanbanCard onSubmit={handleSubmit} />}
            {
              ongoingList?.map((props, index) => <KanbanCard {...props} key={props.title} onDragStart={() => setDraggedItem(props)}> </KanbanCard>)
            }
          </ul> */}
          {/* </KanbanColumn> */}
          {/* <KanbanColumn className='column-done'
          title="已完成"
          canAddNew
          onAdd={handleAdd}
          setDraggedItem={setDraggedItem}
          setIsDragSource={(isSrc) => setDragSource(isSrc ? COLUMN_KEY_DONE : null)}
          setIsDragTarget={(isTgt) => setDragTarget(isTgt ? COLUMN_KEY_DONE : null)}
          cardList={doneList}
          onDrop={handleDrop}> */}
          {/* <h2>已完成
            <button onClick={handleAdd} disabled={showAdd}>&#8853;添加新卡片</button>
            </h2>
            <ul>
            {showAdd && <NewKanbanCard onSubmit={handleSubmit} />}
            {
              doneList?.map((props, index) => <KanbanCard {...props} key={index} onDragStart={() => setDraggedItem(props)}> </KanbanCard>)
            }
          </ul> */}
          {/* </KanbanColumn> */}
        </KanbanBoard>
      </AdminContext.Provider>
    </div>
  );
}

export default App;
